import 'package:flutter/material.dart';

class HelpSection extends StatelessWidget {
  final String title;
  final String content;
  final int index;
  final bool isExpanded;
  final Function(int, bool) onExpandChanged;

  const HelpSection({
    Key? key,
    required this.title,
    required this.content,
    required this.index,
    required this.isExpanded,
    required this.onExpandChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.only(bottom: 16),
      elevation: 2,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: ExpansionPanelList(
          elevation: 0,
          expandedHeaderPadding: EdgeInsets.zero,
          animationDuration: const Duration(milliseconds: 500),
          expansionCallback: (panelIndex, isExpanded) {
            onExpandChanged(index, isExpanded);
          },
          children: [
            ExpansionPanel(
              headerBuilder: (context, isExpanded) {
                return ListTile(
                  title: Text(
                    title,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: isExpanded ? const Color(0xFF3F5491) : Colors.black87,
                    ),
                  ),
                  leading: Icon(
                    isExpanded ? Icons.lightbulb : Icons.help_outline,
                    color: isExpanded ? const Color(0xFFFF8C00) : const Color(0xFF3F5491),
                  ),
                  onTap: () {
                    onExpandChanged(index, !isExpanded);
                  },
                );
              },
              body: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 16,
                  vertical: 8,
                ),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.grey.shade50,
                      Colors.white,
                    ],
                  ),
                ),
                child: Text(
                  content,
                  style: const TextStyle(
                    height: 1.5,
                  ),
                ),
              ),
              isExpanded: isExpanded,
              canTapOnHeader: true,
            ),
          ],
        ),
      ),
    );
  }
} 